<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="textanim-container"> <h1 class="textanim-title">Article Title</h1> <span class="textanim-hidden"> Suspendisse blandit non tellus a commodo. Nam in lorem tortor. Aliquam consequat nunc ut sapien dictum, sollicitudin scelerisque nisi pharetra. </span> </div>

.textanim-container { position: relative; max-width: 250px; min-height: 250px; margin: auto; border: 1px solid #ccc; overflow: hidden; } .textanim-title { margin: 0; position: absolute; width: 100%; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; transition: 0.5s; } .textanim-container:hover .textanim-title { top: 10px; transform: translateY(0); } .textanim-hidden { position: absolute; top: 400px; opacity: 0.5; transition: 0.8s; text-align: center; } .textanim-container:hover .textanim-hidden { top: 50%; transform: translateY(-50%); }